<template>
	<view>
		<block v-if="list.length>0">
			<view class="contens dis dis2 dis3" v-if="isServerShow==0">
				<view class="left">不健康行为记录</view>
				<view class="icon" @click="record">
					<image src="../static/img/jilu.png" mode="aspectFit" class="icon"></image>
				</view>
			</view>
			<block v-else>
				
				<yangs :isShow="2" :isSet="2"></yangs>
			</block>
			<!-- <badness :list="goodList"></badness> -->
			<view class="itemBody" v-if="isSelect>0">
				<view class="topText dis dis1 dis2" v-if="numSone==0">
					<image src="../static/img/lin_1.png" mode="aspectFit" class="lin_1"></image>
					<view class="texts">{{toDay}}</view>
					<image src="../static/img/lin_2.png" mode="aspectFit" class="lin_1"></image>
				</view>
				<block v-for="(item,index) in  list" :key="index">
					<view class="itemlist dis dis2" style="background-color: #FFFFFF;" v-if="item.isover==0">
						<view class="left mar contenr" >
							<image src="../static/img/emo.png" mode="aspectFit" class="images" :class="[item.isconflict ==1?(item.isover==0?'emo':''):'']" v-if="item.isconflict ==1 && item.isover==0"></image>
							<image src="../static/img/wei.png" mode="aspectFit" class="emo1" v-if="item.isover==0 && item.isconflict !=1"></image>
							<image src="../static/img/yi.png" mode="aspectFit" class="emo1" v-if="item.isover==1"></image>
						</view>
						<view class="conter mar dis dis5 " :class="{'mars':item.actionsuggestion.length>13}">
							<text class="text1" >{{item.actionsuggestion}}</text>
							<text class="text2">{{item.actiontitle}}</text>
							<text class="text3">{{item.actiondate}}</text>
						</view>
						<view class="rigth mar contenr">
							<image src="../static/img/wan.png" mode="aspectFit" class="wan" v-if="item.isover==0" @click="triumph(item.id,index)"></image>
							<image src="../static/img/cheng.png" mode="aspectFit" class="wan" v-if="item.isover==1"></image>
						</view>
						<image src="../static/img/jiujiu.png" mode="aspectFit" class="jiujiu" v-if=" item.isconflict ==1 && item.isover==0"></image>
					</view>
					
				</block>
			</view>
		
		</block>
		<block v-if="list.length<=0">
			<block v-if="future==1"><yangs :isShow="isShow" :isSet="is"></yangs></block>
			
			<view class="future dis dis5 dis1 dis2" v-if="future==0">
				<image :src="futurePng" mode="aspectFit" class="futureimg"></image>
				<text class="futuretext">不能查看未来的任务喔~</text>
				<text class="futuretext">快去消灭之前的不健康行为吧！</text>
			</view>
		</block>
		<block v-if="listGoods.length>0">
				<view class="itemBody">
					<view class="topText dis dis1 dis2" v-if="future==1">
						<image src="../static/img/lin_1.png" mode="aspectFit" class="lin_1"></image>
						<view class="texts">以下就当没发生过</view>
						<image src="../static/img/lin_2.png" mode="aspectFit" class="lin_1"></image>
					</view>
					<block v-for="(item,index) in  list" :key="index">
						<view class="itemlist dis dis2" style="background-color: #FFFFFF;" v-if="item.isover==1">
							<view class="left mar contenr">
								<image src="../static/img/wei.png" mode="aspectFit" class="emo1" v-if="item.isover==0"></image>
								<image src="../static/img/yi.png" mode="aspectFit" class="emo1" v-if="item.isover==1"></image>
							</view>
							<view class="conter mar dis dis5 " :class="{'mars':item.actionsuggestion.length>13}">
								<text class="text1 text2s" >{{item.actionsuggestion}}</text>
								<text class="text2">{{item.actiontitle}}</text>
								<text class="text3">{{item.actiondate}}</text>
							</view>
							<view class="rigth mar contenr">
								<image src="../static/img/cheng.png" mode="aspectFit" class="wan" v-if="item.isover==1"></image>
							</view>
						</view>
					</block>
				</view>
		</block>
		<view class="kongs"></view>
	</view>
</template>

<script>
	import yangs from "@/components/yangs.vue";
	import config from '@/common/js/config.js';
	export default {
		props: {
			list: {//所有未完成任务的数组列表
				type: Array
			},
			toDay: {//时间2020-10-27这种格式
				type: String,
				default: '本周'
			},
			isServerShow:{//要不要显示不健康行为
				default:0
			},
			listGoods:{//所有完成任务的数组列表
				type: Array
			},
			isSelect:{
				default: 1
			},
			numSone:{
				default: 0
			},
			future:{//是显示加号还是显示future图片
				default: 1
			}

		},
		components: {
			yangs
		},
		// props:["isDate","list"],
		data() {
			return {
				isShow: 1,
				is: 1,
				futurePng:`${config.imgUrl}future.png`
			}

		},
		methods: {
			triumph(id, index) {
				let that = this;
				this.$http._post('yang/oversuggestion.do', {
					id
				}).then(res => {
					console.log(res)
					if (res.data.issuccess == 1) {
						this.$http.isMssage(res.data.data);
						this.$emit('func', true);
					} else {
						this.$http.isMssage(res.data.msg)
					}
				})
				// console.log(this.list)
			},
			record() {
				uni.navigateTo({
					url: '/second/me/record/record'
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	@import "../common/css/flex.css";
	@import "../common/css/index.scss";

	.contens {
		width: 686upx;
		height: 122upx;
		// border: 1px solid red;
		margin: auto;

		.left {
			font-size: 36upx;
			font-family: $typeface;
			font-weight: 500;
			color: #333333;
		}

		.icon {
			width: 128upx;
			height: 56upx;
		}
	}

	.itemBody {
		width: 686upx;
		margin: 0 auto;

		.topText {
			width: 100%;
			height: 33upx;
			margin-bottom: 12upx;

			.topLeft {
				width: 103upx;
				height: 1px;
				background: #E2E2E2;
			}

			.texts {
				margin: 0 24upx;
				font-size: 24upx;
				font-family: $typeface1;
				font-weight: 400;
				color: #C1C1C1;
			}

			.lin_1 {
				width: 103upx;
				height: 1px;
			}
		}

		.itemlist {
			width: 686upx;
			min-height: 181upx;
			background: #FFFFFF;
			border-radius: 24upx;
			margin: 24upx 0;
			position: relative;

			.mar {
				margin-top: 23upx;
				height: 158upx;
			}
			
			.left {
				width: 116upx;
				.emo1 {
					width: 72upx;
					height: 72upx;
					margin-bottom: 23rpx;
				}

				.images {
					width: 72upx;
					height: 72upx;
					margin-bottom: 23rpx;

				}
				.emo {
					width: 116upx;
					height: 158upx;
					margin-bottom: 23rpx;
				}
			}

			.conter {
				width: 428upx;

				.text1 {
					min-height: 45upx;
					font-size: 32upx;
					font-family: $typeface;
					font-weight: 500;
					color: #333333;
					line-height: 45upx;
					margin-top: 5rpx;
				}
				.text2s{
					color: #999;
				}
				.text1s{
					font-size: 26upx;
				}

				.text2 {
					height: 40upx;
					font-size: 28upx;
					font-family: $typeface1;
					font-weight: 400;
					color: #999999;
					line-height: 40upx;
					margin-top: 15upx;
				}

				.text3 {
					height: 33upx;
					font-size: 24upx;
					font-family: $typeface1;
					font-weight: 400;
					color: #C1C1C1;
					line-height: 33upx;
				}
			}

			.rigth {
				width: 114upx;

				.wan {
					width: 114upx;
					height: 114upx;
					margin-bottom: 23rpx;
				}
			}
			.jiujiu {
				position: absolute;
				top: -10upx;
				width: 110upx;
				height: 34upx;
			}
			.mars{
				// margin-top: 0upx;
				// height: 0upx;
				// height: 100%;
			}
		}

		
	}
	.kongs{
		width: 100%;
		height: 100upx;
	}
	.future{
		width: 100%;
		height: 750upx;
		.futureimg{
			width: 566upx;
			height: 276upx;
			
		}
		.futuretext{
			font-size: 30upx;
			font-family: $typeface1;
			font-weight: 400;
			color: #999999;
		}
	}
</style>
